import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:seedfour/app/constants.dart';
import '../../routes/app_routes.dart';

import 'logic.dart';

class LoginSmsPage extends StatelessWidget {
  LoginSmsPage({Key? key}) : super(key: key);

  final logic = Get.find<LoginSmsLogic>();

  @override
  Widget build(BuildContext context) {
      return GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.white,
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage('assets/images/login_background.jpg'),
              fit: BoxFit.fitHeight),
        ),
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SvgPicture.asset(
              'assets/images/logo.svg',
              width: 68.w,
              height: 68.w,
            ),
            SizedBox(height: kSpaceMedium),
            Text(
              '欢迎登录师付平台',
              style: TextStyle(
                fontSize: kFontSizeLarge,
              ),
            ),
            SizedBox(height: kSpaceHuge),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: kSpaceBig),
              child: TextField(
                controller: logic.phoneController.value,
                keyboardType: TextInputType.number,
                inputFormatters: <TextInputFormatter>[
                  FilteringTextInputFormatter.digitsOnly
                ],
                decoration: InputDecoration(
                  hintText: '请输入手机号',
                  hintStyle: TextStyle(
                    color: const Color(0xFFB6BCCB),
                    fontSize: kFontSizeSmall,
                  ),
                  fillColor: Colors.white,
                  filled: true,
                  contentPadding:
                      const EdgeInsets.symmetric(vertical: 14, horizontal: 14),
                  border: OutlineInputBorder(
                    borderRadius:
                        BorderRadius.all(Radius.circular(kRadiusSmall)),
                    borderSide: BorderSide.none,
                  ),
                ),
              ),
            ),
            SizedBox(height: kSpaceMedium),
            Container(
              margin: EdgeInsets.symmetric(horizontal: kSpaceBig),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(kRadiusSmall),
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                        hintText: '请输入验证码',
                        hintStyle: TextStyle(
                          color: const Color(0xFFB6BCCB),
                          fontSize: kFontSizeSmall,
                        ),
                        fillColor: Colors.transparent,
                        filled: true,
                        contentPadding: EdgeInsets.symmetric(
                            vertical: 14.w, horizontal: 14.w),
                        border: const OutlineInputBorder(
                            borderSide: BorderSide.none),
                      ),
                      keyboardType: TextInputType.number,
                      controller: logic.codeController.value,
                      inputFormatters: <TextInputFormatter>[
                        FilteringTextInputFormatter.digitsOnly
                      ],
                    ),
                  ),
                  Container(
                    width: 0.5.w,
                    height: 18.w,
                    color: const Color(0xFFDFE0EA),
                  ),
                  Obx(
                    () => TextButton(
                      onPressed: logic.isSending.value
                          ? null
                          : () => {logic.getSmsCode()},
                      style: ButtonStyle(
                        padding: WidgetStatePropertyAll(EdgeInsets.all(14.w)),
                        shape: WidgetStatePropertyAll(
                          RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(kRadiusSmall),
                          ),
                        ),
                      ),
                      child: Text(
                        logic.isSending.value
                            ? '(${logic.countdown.value})s后重试'
                            : '获取验证码',
                        style: TextStyle(
                            fontSize: kFontSizeSmall,
                            color: const Color(0xFF495AFF)),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: kSpaceSmall),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: kSpaceBig),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 选择框
                  Obx(
                    () => Checkbox(
                      value: logic.isAgree.value,
                      onChanged: (value) => logic.isAgree.value = value!,
                      visualDensity: const VisualDensity(
                          horizontal: VisualDensity.minimumDensity,
                          vertical: VisualDensity.minimumDensity),
                      activeColor: const Color(0xFF495AFF),
                      materialTapTargetSize: MaterialTapTargetSize.values[0],
                    ),
                  ),

                  RichText(
                    text: TextSpan(
                      style: const TextStyle(height: 1.5),
                      children: [
                        TextSpan(
                          text: '我已阅读并同意 ',
                          style: TextStyle(
                            fontSize: kFontSizeMini,
                            color: const Color(0xFF697491),
                          ),
                        ),
                        TextSpan(
                          text: '用户协议',
                          style: TextStyle(
                            fontSize: kFontSizeMini,
                            color: const Color(0xFF495AFF),
                          ),
                          recognizer: TapGestureRecognizer()
                            ..onTap = () => logic.onClickAgreement(),
                        ),
                        TextSpan(
                          text: ' 和 ',
                          style: TextStyle(
                            fontSize: kFontSizeMini,
                            color: Colors.grey,
                          ),
                        ),
                        TextSpan(
                          text: '隐私政策',
                          style: TextStyle(
                            fontSize: kFontSizeMini,
                            color: const Color(0xFF495AFF),
                          ),
                          recognizer: TapGestureRecognizer()
                            ..onTap = () => logic.onClickPrivacy(),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: kSpaceHuge),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: kSpaceBig),
              child: SizedBox(
                width: double.infinity,
                height: kIconSizeLarge,
                child: Obx(
                  () => FilledButton(
                    onPressed:
                        logic.isLoading.value ? null : () => logic.login(),
                    child: Text(
                      '登 录',
                      style: TextStyle(fontSize: kFontSizeMedium),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: kSpaceSmall),
            TextButton(
              onPressed: () => {Get.toNamed(RouteGet.loginSms)},
              child: Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    '密码登录',
                    textAlign: TextAlign.start,
                    style: TextStyle(
                      color: const Color(0xFF495AFF),
                      fontSize: kFontSizeMedium,
                      height: -0.1,
                    ),
                  ),
                  Icon(
                    Icons.arrow_forward_ios,
                    color: const Color(0xFF495AFF),
                    size: 18.w,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ));
  }
}
